// 声明变量
// 全选框
var selectAll = document.getElementsByClassName('selectAll')[0];
// 上下翻页 页数
var size2 = document.getElementsByClassName('size2')[0];
// 第几页
let page = 1;
// 显示几列
let lis = 10;
// 储存单选框状态和ID
var intstate1 = [];
// 储存页码渲染内容
var interim = [];
// 总页码数变量
var pages1;
// 当前页码变量
var num1;
// 内容渲染函数
function addcent(nowStudents) {
    $('tbody').html('');
    for(var i = 0; i < nowStudents.length; i++) {
        var cent1;
        if (intstate1[i].selectstate) {
            cent1 = `<span class="select selected_on" data-id=${nowStudents[i].id} data-name = select_1></span>`;
          } else {
            cent1 = `<span class="select" data-id=${nowStudents[i].id} data-name = select_1 ></span>`;
        }
        var cent = `
        <tr>
           
            // <td>${cent1}</td>
            <td>${nowStudents[i].name}</td>
            <td>${nowStudents[i].class}</td>
            <td>${nowStudents[i].gender}</td>
            <td>${nowStudents[i].id}</td>
            <td>${nowStudents[i].phone}</td>
            <td>${nowStudents[i].Email}</td>
            <td>${nowStudents[i].Dates}</td>
            <td>
                <a href="../ly_pages/student_revamp.html?userId=${nowStudents[i].id}" target="myiframe">
                    <div class = "btn-group btn-group-xs">
                        <button type="button" class= "btn btn-primary">
                            修改
                        </button>
                    </div>
                </a>
                &nbsp;&nbsp;
                <a href="../ly_pages/student_details.html?userId=${nowStudents[i].id}" target="myiframe">
                    <div class = "btn-group btn-group-xs">
                        <button type="button" class= "btn btn-info">
                            查询
                        </button>  
                    </div>
                </a>
                &nbsp;&nbsp;
                <div class = "btn-group btn-group-xs">
                    <button type="button" class= "btn btn-danger" data-id=${nowStudents[i].id}>
                        删除
                    </button>
                </div> 
            </td>
        </tr>
        `    
        $('tbody').append(cent);
    }
}
// 页码渲染函数
function addpage(pagesz) {
    $('.size2').html('');
    pages1 = Math.ceil(pagesz / lis);
    for(var n = 1; n < pages1 + 1; n++) {
        var pages2 = `<p id = "size2-p3">${n}</p>`;
        interim.push(pages2);
    }
    var pages3 = interim.join().replace(',', '');
    var pages = `
        <p class="size2-p1">
            上一页
        </p>
        ${pages3}
        <p class="size2-p2">
            下一页>
        </p>
    `
    interim = [];
    $('.size2').append(pages);

}
// 内容渲染
function initstudent() {
    $.ajax({
        url: '/student/get',
        method: 'GET',
        data: {
            page,
            lis
        }
      })
        .done(function (res) {
        if(intstate1.length == 0) {
            for(var q = 0; q < res.data.length;q++) {
                intstate1.push({
                    newid:res.data[q].id,
                    selectstate:false
                });
            }
        } 
        addcent(res.data);
        })
        .fail(function (err) {
          console.log('请求失败：', err);
        });
}
newinitstudent();
// 页码内容渲染
function newinitstudent() {
    $.ajax({
        url: '/student/total',
        method: 'GET',
        
      })
        .done(function (res) {
          addpage(res.data.total) 
          initstudent(); 
        })
        .fail(function (err) {
          console.log('请求失败：', err);
        });
}

// 渲染内容点击事件
$('tbody')[0].onclick = function (e) {
    var e = e || window.event;
    var target = e.target || e.srcElement;
    var Id1 = Number(target.dataset.id);
    // console.log(target.className)
    switch (target.dataset.name) {
        case 'select_1':
            selectcor(Id1);
            break;
    }
    switch (target.className) {
        case 'btn btn-danger':
            del(Id1);
            break;
    }
}
// 上下翻页 页数 添加点击事件
size2.onclick = function (e) {
    var e = e || window.event;
    var target = e.target || e.srcElement;
    num1 = Number(target.innerText);
    switch (target.className) {
        case 'size2-p1':
            prey();
            break;
        case 'size2-p2':
            next();
            break;
    }
    switch (target.id) {
        case 'size2-p3':
            num(num1);
            break;
    }
}
    
//删除函数
function del(Id1) {
    $.ajax({
        url: '/student/del',
        method: 'POST',
        data: {
            Id1: Id1
        }
      })
        .done(function (res) {

        //   var deleteBounced = parent.layer.open({
        //     content: res.msg
        //     ,yes: function(){
        //         // initstudent()
                intstate1=[];
                selectAll.classList.remove('selected_on');
                newinitstudent();
            //     parent.layer.close(deleteBounced);
            // }})
            parent.layer.msg('删除成功', {icon: 1},{time: 2000,});
        })
        .fail(function (err) {
          console.log('请求失败：', err);
        });
}
// 批量删除事件
$('#button1').on('click',function() {
    let intstate2 = intstate1.filter(function(item){
        return item.selectstate == true;
    })
    console.log(intstate2)
    for(var n = 0; n < intstate2.length; n++) {
    $.ajax({
        url: '/student/del',
        method: 'POST',
        data: {
            Id1: intstate2[n].newid
        }
    })
        .done(function (res) {
            // parent.layer.confirm(res.msg, {
            //     btn: ['确定','取消'] //按钮
            //     }, function(){
                intstate1=[];
                selectAll.classList.remove('selected_on');
                
                newinitstudent();
                page -= 1;
                $('tbody').html('');
                newinitstudent();
                // console.log(page)
                parent.layer.msg('删除成功', {icon: 1},{time: 2000,});
                // }, function(){
                //     return parent.layer.msg('取消', {icon: 1}, {time: 2000,});

                // });
        //   var deleteBounced = parent.layer.open({
        //     content: res.msg
        //     ,yes: function(){
        //         intstate1=[];
        //         // selectAll.classList.remove('selected_on');
        //         // initstudent()
        //         // console.log(intstate1)
        //         newinitstudent();
        //         parent.layer.close(deleteBounced);
        //     }})
        })
        .fail(function (err) {
          console.log('请求失败：', err);
        });
    }
})
// 全选框事件
selectAll.onclick = function() {
    if (this.className == 'select selectAll') { // 全选了
        this.classList.add('selected_on');
        intstate1.forEach(function (item) {
          item.selectstate = true;
        });
      } else {
        this.classList.remove('selected_on');
        intstate1.forEach(function (item) {
          item.selectstate = false;
        });
    }

    newinitstudent();
}
// 单选框函数
function selectcor(Id1) {
    intstate1.forEach(function (item) {      
        if (item.newid == Id1) {
        item.selectstate = !item.selectstate;
    }
    });
    var x1 = intstate1.every(function (item) {     
        return item.selectstate == true
    });
    if (x1) {
        selectAll.classList.add('selected_on');
    } else {
        selectAll.classList.remove('selected_on');
    }
    newinitstudent();
}

// 页数函数
function num(num1) {
    if( page != num1) {
        selectAll.classList.remove('selected_on');
        intstate1 = [];
        page = num1;
        newinitstudent();
    }
}
// 下一页函数
function next() {
    if(page < pages1) {
        selectAll.classList.remove('selected_on');
        page += 1;
        intstate1 = [];
    } else {
        parent.layer.msg('已经到头了',{icon: 5}); 
    }
    newinitstudent();
}

// 上一页函数
function prey() {
    if(page > 1) {
        selectAll.classList.remove('selected_on');
        page -= 1;
        intstate1 = [];
    
    } else {
        parent.layer.msg('前面没有页数了',{icon: 5}); 
    }
    newinitstudent();
}